import { Form, Input, Button, Select, message } from 'antd';
import axios from 'axios';
import { useEffect } from 'react';

const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

function EditBooks({editSetvisible,editrecord}:any,) {
  useEffect(function () {
    seteditrecord()
  }, [editrecord]);

  function seteditrecord(){
    form.setFieldsValue(editrecord)
    // console.log(editrecord);
  }


  const [form] = Form.useForm();
//点击修改书籍
  const onFinish = async(values: any) => {
    // console.log(values,editrecord.id);
    const res = await axios.put('http://localhost:7001/editbooks',{editbooksinfo:values,id:editrecord.id});
    // console.log('111',res);
    if(res.status===200){
      editSetvisible(false);
       // 成功信息提示
    setTimeout(() => {
      message.success({ content: '修改成功', duration: 1 });
    }, 500);
    }
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="name" label="书名" initialValue={editrecord.name} rules={[{ required: true }]}> 
        <Input />
      </Form.Item>
      <Form.Item name="numbering" label="编号" initialValue={editrecord.numbering} rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="sort" label="类别" initialValue={editrecord.sort} rules={[{ required: true }]}>
        <Select
          placeholder="Select a option and change input text above"
          allowClear
        >
          <Option value="文学">文学</Option>
          <Option value="编程">编程</Option>
          <Option value="生活">生活</Option>
          <Option value="历史">历史</Option>
          <Option value="其他">其他</Option>
        </Select>
      </Form.Item>
       <Form.Item name="synopsis" label="简介" initialValue={editrecord.synopsis} rules={[{ required: false }]}>
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" style={{ marginRight: '20px'}}>
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>
  );
};

export default EditBooks;
